<script setup lang="ts">
import { addJueSeApi, getJueSeWeiHuApi } from '@/api/system'
import { EditPen, Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import addChange from './components/addChange.vue'
import attribute from './components/attribute.vue'
import { usetreeStore } from '@/stores'

const loading = ref(false)
// const indexMethod = (index: number) => index + 1
const tableData = ref([])
const tableTotal = ref(0)
const searchForm = ref({
  dimName: '',
  page: 1,
  rows: 20
})
const getList = async () => {
  loading.value = true
  const params = {
    sqlId: 'dimMgr.dimInfo',
    sqlParam: JSON.stringify({ dimName: searchForm.value.dimName }),
    pagination: true,
    page: searchForm.value.page,
    rows: searchForm.value.rows
  }
  await getJueSeWeiHuApi(params)
    .then((res: any) => {
      tableData.value = res.rows
      tableTotal.value = res.total
    })
    .catch(() => {
      ElMessage({ message: '数据请求失败', type: 'error' })
    })
    .finally(() => {
      loading.value = false
    })
}
const SearchBtn = () => {
  getList()
}
const handleSizeChange = (val: number) => {
  searchForm.value.page = 1
  searchForm.value.rows = val
  getList()
}
const handleCurrentChange = (val: number) => {
  searchForm.value.page = val
  getList()
}

const isShow = ref(false)
const formInfo = ref({})
const title = ref('新增维度')
const AddBtn = () => {
  title.value = '新增维度'
  formInfo.value = {}
  isShow.value = true
}
const changeBtn = (row: any) => {
  title.value = '修改维度'
  formInfo.value = row
  isShow.value = true
  console.log(row)
}
const deleteBtn = (row: any) => {
  const params = {
    sqlId: JSON.stringify(['dimMgr.deleteDim', 'dimMgr.deleteDimProp', 'dimMgr.deleteDimSort']),
    sqlParam: JSON.stringify([[{ ...row }], [{ ...row }], [{ ...row }]]),
    dbName: ''
  }
  ElMessageBox.confirm('你确定要删除本维度？', '删除维度', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await addJueSeApi(params)
        .then((res: any) => {
          if (res === 'success') {
            getList()
            ElMessage({ message: '删除成功', type: 'success' })
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
        .catch(() => {
          ElMessage({ message: '删除失败', type: 'error' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}
// 属性维护
// 查看维表是否存在
const treeStore = usetreeStore()
const attributeShow = ref(false)
const attributeInfo = ref({})
const getWeiBiao = async (info: any) => {
  const params = {
    sqlId: 'dimMgr.getTabCol',
    sqlParam: JSON.stringify({ owner: info.split('.')[0], tab: info.split('.')[1] })
  }
  await getJueSeWeiHuApi(params)
    .then((res: any) => {
      if (res.rows.length > 0) {
        treeStore.setColumnList(res.rows)
        attributeShow.value = true
      } else {
        ElMessage({ message: `维表 ${info} 不存在`, type: 'error' })
      }
    })
    .catch(() => {
      ElMessage({ message: '数据请求失败', type: 'error' })
    })
}
const attributeBtn = (row: any) => {
  attributeInfo.value = row
  getWeiBiao(row.dim_tab)
}

onMounted(() => {
  getList()
})
</script>
<template>
  <div class="baobiaoBox">
    <el-form :inline="true" :model="searchForm" style="margin-top: 15px">
      <el-form-item label="维度名称：">
        <el-input v-model="searchForm.dimName" placeholder="请输入维度名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="SearchBtn">查询</el-button>
        <el-button type="success" plain :icon="Plus" @click="AddBtn">添加维度</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      border
      style="width: 100%"
      class="baobiaoTableBox TableBox"
    >
      <el-table-column prop="dim_id" label="维度ID" width="80" />
      <el-table-column prop="dim_name" label="维度名称" />
      <el-table-column prop="dim_tab" label="维表名称" />
      <el-table-column prop="tab_pk" label="维表主键" width="180" />
      <el-table-column prop="dim_order" label="排序" width="180" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button text type="warning" :icon="EditPen" @click="attributeBtn(scope.row)">
            属性维护
          </el-button>
          <el-button text type="primary" @click="changeBtn(scope.row)">修改</el-button>
          <el-button type="danger" text @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="searchForm.page"
      v-model:page-size="searchForm.rows"
      :page-sizes="[10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <addChange
      v-if="isShow"
      v-model:is-show="isShow"
      :title="title"
      :form-info="formInfo"
      @getList="getList"
    />
    <attribute v-if="attributeShow" v-model:is-show="attributeShow" :form-info="attributeInfo" />
  </div>
</template>
<style scoped lang="less">
.baobiaoBox {
  position: relative;
  height: calc(100vh - 200px);
  padding: 0 8px;
  .TableBox {
    height: calc(100vh - 270px);
  }
  .baobiaoTableBox {
    .el-button {
      padding: 0;
    }
  }
  .paginationBox {
    position: fixed;
    bottom: 20px;
  }
}
</style>
